<template>
  <div>
    <SearchNav />
    <div class="nr_details">
      <div class="container">
        <div class="building">
          <ul>
            <li v-for="(buildingConfig,idx) in buildingConfigInfoLists" :key="idx"
              @click="changeConfig(idx)" :class="buildingConfigShow==idx?'active':''">
              {{buildingConfig.title}}</li>
          </ul>
          <div>咨询电话: 4008018622转08379</div>
        </div>
        <div class="config_info">
          <ul class="build">
            <li v-for="(item,index) in buildingConfigInfoLists" :key="index" class="build_item">
              <h4>
                {{item.title}}
              </h4>
              <ul class="build_item_list" v-if="item.info">
                <li class="item_list_item" v-for="(info,idx) in item.info" :key="idx">
                  <h5> {{info.title2}}</h5>
                  <div class="item_container">
                    <div class="container_left">
                      <!-- 1 -->
                      <div v-if="info.name">楼盘名称<span style="color:#101D37">{{info.name}}</span>
                      </div>
                      <div class="build_trait" v-if="info.traits">楼盘特点
                        <ul class="trait">
                          <li v-for="(trait,idx) in info.traits" :key="idx">{{trait}}</li>
                        </ul>
                      </div>
                      <div v-if="info.address">楼盘地址<span
                          style="color:#101D37">{{info.address}}</span><span
                          style="margin-left:5px;color:#3072F6">查看地图</span>
                      </div>
                      <div v-if="info.phone">售楼处电话<span style="color:#F15044;">{{info.phone}}</span>
                      </div>
                      <!-- 1end -->
                      <!-- 2 -->
                      <div v-if="info.payment">最低首付<span
                          class="color_hei">{{info.payment}}</span><span
                          style="margin-left:5px;color:#3072F6">房贷计算器</span>
                      </div>
                      <div v-if="info.opening">楼盘名称<span
                          style="color:#101D37">{{info.opening}}</span>
                      </div>
                      <div v-if="info.address2">楼盘名称<span
                          style="color:#101D37">{{info.address2}}</span>
                      </div>
                      <!-- 2end -->
                      <!-- 3 -->
                      <div v-if="info.type">楼盘名称<span style="color:#101D37">{{info.type}}</span>
                      </div>
                      <div v-if="info.type">楼盘名称<span style="color:#101D37">{{info.type}}</span>
                      </div>
                      <div v-if="info.type">楼盘名称<span style="color:#101D37">{{info.type}}</span>
                      </div>
                      <div v-if="info.type">楼盘名称<span style="color:#101D37">{{info.type}}</span>
                      </div>
                      <div v-if="info.type">楼盘名称<span style="color:#101D37">{{info.type}}</span>
                      </div>
                      <!-- 3edn -->
                      <!-- 4 -->
                      <div v-if="info.certificate">预售证号<span
                          class="color_lan">{{info.certificate}}</span>
                      </div>
                      <div v-if="info.issueDate">发证时间<span
                          class="color_hei">{{info.issueDate}}</span>
                      </div>
                      <div v-if="info.binding">绑定楼栋<span class="color_hei">{{info.binding}}</span>
                      </div>
                      <div v-if="info.certificate">预售证号<span
                          class="color_lan">{{info.certificate}}</span>
                      </div>
                      <div v-if="info.issueDate">发证时间<span
                          class="color_hei">{{info.issueDate}}</span>
                      </div>
                      <div v-if="info.binding">绑定楼栋<span class="color_hei">{{info.binding}}</span>
                      </div>
                      <!-- 4edn -->
                    </div>

                    <div class="container_right">
                      <!-- 1 -->
                      <div v-if="info.price">参考单价<span
                          style="color:#F15044;font-weight: 500;">27700</span><span
                          style="color:#F15044;">元/㎡</span></div>
                      <div v-if="info.dwelling">物业类型<span class="color_hei">{{info.dwelling}}</span>
                      </div>
                      <div v-if="info.developers">开发商<span
                          class="color_hei">{{info.developers}}</span></div>
                      <div v-if="info.area">区域位置 <span class="color_hei">{{info.area}}</span>
                      </div>
                      <!-- 1end -->
                      <!-- 2 -->
                      <div v-if="info.door">楼盘地址<span
                          style="color:#101D37">{{info.door}}</span><span
                          style="margin-left:5px;color:#3072F6">查看地图</span>
                      </div>
                      <div v-if="info.timer">楼盘名称<span style="color:#101D37">{{info.timer}}</span>
                      </div>
                      <!-- 2end -->
                      <!-- 3 -->
                      <div v-if="info.type">楼盘名称<span style="color:#101D37">{{info.type}}</span>
                      </div>
                      <div v-if="info.type">楼盘名称<span style="color:#101D37">{{info.type}}</span>
                      </div>
                      <div v-if="info.type">楼盘名称<span style="color:#101D37">{{info.type}}</span>
                      </div>
                      <div v-if="info.type">楼盘名称<span style="color:#101D37">{{info.type}}</span>
                      </div>
                      <div v-if="info.type">楼盘名称<span style="color:#101D37">{{info.type}}</span>
                      </div>
                      <!-- 3edn -->
                      <!-- 4 -->
                      <div v-if="info.certificate">预售证号<span
                          class="color_lan">{{info.certificate}}</span>
                      </div>
                      <div v-if="info.issueDate">发证时间<span
                          class="color_hei">{{info.issueDate}}</span>
                      </div>
                      <div v-if="info.binding">绑定楼栋<span class="color_hei">{{info.binding}}</span>
                      </div>
                      <div v-if="info.certificate">预售证号<span
                          class="color_lan">{{info.certificate}}</span>
                      </div>
                      <div v-if="info.issueDate">发证时间<span
                          class="color_hei">{{info.issueDate}}</span>
                      </div>
                      <div v-if="info.binding">绑定楼栋<span class="color_hei">{{info.binding}}</span>
                      </div>
                      <!-- 4edn -->
                    </div>
                  </div>
                </li>
                <div class="more">查看更多<el-icon>
                    <ArrowDownBold />
                  </el-icon>
                </div>
              </ul>
              <!-- v-if="item.photoAlbum" -->
              <div class="photo_album" v-if="item.photoAlbum">
                <div class="photo_album_container">
                  <ul class="container_head">
                    <li v-for="(head,idx)  in item.photoAlbum.head" :key="idx"
                      :class="headActive===idx?'head_active':''" @click="changeHeadActive(idx)">
                      {{head}}</li>
                  </ul>
                  <ul class="container_content">
                    <li v-for="(img,idx) in item.photoAlbum.imgList" :key="idx">
                      <h5>
                        {{img.head2}}
                        <span>({{img.length}})</span>
                      </h5>
                      <ul class="img_list">
                        <li v-for="(item,idx) in img.imgUrlS" :key="idx">
                          <div><img :src="item.imgUrl" alt=""></div>
                          <div v-if="item.text" class="img_text">{{item.text}}</div>
                          <div>{{item.time}}</div>
                        </li>
                        <div class="even_more" v-if="img.length>5">查看更多</div>
                      </ul>
                    </li>
                  </ul>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref, toRefs } from '@vue/reactivity'
// import { useRoute } from 'vue-router'

export default {
  name: 'NRDetails',
  setup () {
    // const route = useRoute()
    const buildingConfigInfoLists = reactive({
      buildingConfigInfoLists: [
        // 楼盘详情
        {
          title: '楼盘详情',
          info:
            [
              { title2: '基本信息', name: '广州敏捷绿湖首府', traits: ['特价房源', '装修交付', '大户型', '南北通透', '大阳台'], price: 27700, phone: '400 081 1276', address: '南宁路与大理路交口', dwelling: '住宅', developers: '合肥联滨房地产开发有限公司', area: '滨湖新区- 金融板块' },
              { title2: '销售信息', payment: '尚未公开', opening: '2022年7月6日', address2: '南宁路与大理路交口', door: '2室户型(5)', timer: '2024年12月31日' },
              { title2: '小区情况', type: '小高层' },
              { title2: '预售许可证', certificate: '合房预售证第20220563号', issueDate: '2022-06-28', binding: '3#' }
            ]
        },
        // 楼盘相册
        {
          title: '楼盘相册',
          photoAlbum: {
            head: ['全部照片', 'VR看房', '视频', '楼盘图', '沙盘图', '样板间', '位置图', '配套图', '售楼处', '楼盘执照'],
            imgList: [
              {
                head2: 'VR看房',
                imgUrlS: [
                  {
                    imgUrl: require('@/assets/images/1-1.png'),
                    text: 'VR看房-滨语听湖',
                    time: '2022-01-15'
                  },
                  {
                    imgUrl: require('@/assets/images/1-1.png'),
                    text: 'VR看房-滨语听湖',
                    time: '2022-01-15'
                  },
                  {
                    imgUrl: require('@/assets/images/1-1.png'),
                    text: 'VR看房-滨语听湖',
                    time: '2022-01-15'
                  },
                  {
                    imgUrl: require('@/assets/images/1-1.png'),
                    text: 'VR看房-滨语听湖',
                    time: '2022-01-15'
                  },
                  {
                    imgUrl: require('@/assets/images/1-1.png'),
                    text: 'VR看房-滨语听湖',
                    time: '2022-01-15'
                  }
                ],
                length: 5
              },
              {
                head2: '视频',
                imgUrlS: [
                  {
                    imgUrl: require('@/assets/images/1-1.png'),
                    text: 'VR看房-滨语听湖',
                    time: '2022-01-15'
                  }
                ],
                length: 1
              },
              {
                head2: 'VR看房',
                imgUrlS: [
                  {
                    imgUrl: require('@/assets/images/1-1.png'),
                    text: 'VR看房-滨语听湖',
                    time: '2022-01-15'
                  },
                  {
                    imgUrl: require('@/assets/images/1-1.png'),
                    text: 'VR看房-滨语听湖',
                    time: '2022-01-15'
                  },
                  {
                    imgUrl: require('@/assets/images/1-1.png'),
                    text: 'VR看房-滨语听湖',
                    time: '2022-01-15'
                  },
                  {
                    imgUrl: require('@/assets/images/1-1.png'),
                    text: 'VR看房-滨语听湖',
                    time: '2022-01-15'
                  },
                  {
                    imgUrl: require('@/assets/images/1-1.png'),
                    text: 'VR看房-滨语听湖',
                    time: '2022-01-15'
                  }
                ],
                length: 5
              },
              {
                head2: 'VR看房',
                imgUrlS: [
                  {
                    imgUrl: require('@/assets/images/1-1.png'),
                    text: 'VR看房-滨语听湖',
                    time: '2022-01-15'
                  },
                  {
                    imgUrl: require('@/assets/images/1-1.png'),
                    text: 'VR看房-滨语听湖',
                    time: '2022-01-15'
                  },
                  {
                    imgUrl: require('@/assets/images/1-1.png'),
                    text: 'VR看房-滨语听湖',
                    time: '2022-01-15'
                  },
                  {
                    imgUrl: require('@/assets/images/1-1.png'),
                    text: 'VR看房-滨语听湖',
                    time: '2022-01-15'
                  },
                  {
                    imgUrl: require('@/assets/images/1-1.png'),
                    text: 'VR看房-滨语听湖',
                    time: '2022-01-15'
                  }
                ],
                length: 5
              },
              {
                head2: 'VR看房',
                imgUrlS: [
                  {
                    imgUrl: require('@/assets/images/1-1.png'),
                    text: 'VR看房-滨语听湖',
                    time: '2022-01-15'
                  },
                  {
                    imgUrl: require('@/assets/images/1-1.png'),
                    text: 'VR看房-滨语听湖',
                    time: '2022-01-15'
                  },
                  {
                    imgUrl: require('@/assets/images/1-1.png'),
                    text: 'VR看房-滨语听湖',
                    time: '2022-01-15'
                  },
                  {
                    imgUrl: require('@/assets/images/1-1.png'),
                    text: 'VR看房-滨语听湖',
                    time: '2022-01-15'
                  },
                  {
                    imgUrl: require('@/assets/images/1-1.png'),
                    text: 'VR看房-滨语听湖',
                    time: '2022-01-15'
                  }
                ],
                length: 5
              },
              {
                head2: 'VR看房',
                imgUrlS: [
                  {
                    imgUrl: require('@/assets/images/1-1.png'),
                    text: 'VR看房-滨语听湖',
                    time: '2022-01-15'
                  },
                  {
                    imgUrl: require('@/assets/images/1-1.png'),
                    text: 'VR看房-滨语听湖',
                    time: '2022-01-15'
                  },
                  {
                    imgUrl: require('@/assets/images/1-1.png'),
                    text: 'VR看房-滨语听湖',
                    time: '2022-01-15'
                  },
                  {
                    imgUrl: require('@/assets/images/1-1.png'),
                    text: 'VR看房-滨语听湖',
                    time: '2022-01-15'
                  },
                  {
                    imgUrl: require('@/assets/images/1-1.png'),
                    text: 'VR看房-滨语听湖',
                    time: '2022-01-15'
                  }
                ],
                length: 5
              }
            ]
          }

        },
        {
          title: '楼盘时刻'
        },
        {
          title: '楼盘户型'

        },
        {
          title: '楼盘评测'

        },
        {
          title: '楼盘房源'

        },
        {
          title: '周边配套'
        }
      ]
    })
    // 楼盘配置信息
    const buildingConfigShow = ref(0)
    // 切换楼盘配置信息
    const changeConfig = (idx) => {
      buildingConfigShow.value = idx
    }
    const headActive = ref(0)
    const changeHeadActive = (idx) => {
      headActive.value = idx
    }
    return {
      buildingConfigShow,
      headActive,
      changeConfig,
      changeHeadActive,
      ...toRefs(buildingConfigInfoLists)
    }
  }

}
</script>

<style lang='less' scoped>
.color_hei {
  color: #101d37;
}
.color_lan {
  color: #3072f6;
}
.nr_details {
  width: 1920px;
  margin: 0 auto;
  .container {
    width: 1180px;
    margin: 0 auto;
    .building {
      display: flex;
      justify-content: space-between;
      width: 1180px;
      height: 55px;
      background-color: #f5f5f5;
      ul {
        display: flex;
        align-items: center;
        width: 720px;
        li {
          width: 96px;
          height: 55px;
          line-height: 55px;
          text-align: center;
          cursor: pointer;
        }
        .active {
          border-bottom: 1px solid #3072f6;
          color: #3072f6;
        }
      }

      div {
        width: 266px;
        height: 55px;
        line-height: 55px;
        text-align: center;
      }
    }
    .config_info {
      .build {
        .build_item {
          h4 {
            font-weight: 700;
            font-size: 24px;
            color: #101d37;
            margin: 48px 0 0;
          }
          .build_item_list {
            position: relative;
            .more {
              position: absolute;
              left: 50%;
              bottom: 20px;
              transform: translateX(-50%);
            }
            .item_list_item {
              width: 1180px;
              min-height: 231px;
              border: 1px solid #ededed;
              margin-top: 24px;
              padding: 30px;
              h5 {
                font-size: 20px;
                color: #101d37;
              }
              .item_container {
                display: flex;
                color: #9399a5;
                justify-content: space-between;
                .container_left {
                  width: 472px;
                }
                .container_right {
                  width: 472px;
                }
                .container_left,
                .container_right {
                  div {
                    margin-top: 25px;
                  }
                  div:nth-child(1) {
                    margin-top: 20px;
                  }
                  span,
                  ul {
                    margin-left: 16px;
                    font-size: 16px;
                  }
                  .build_trait {
                    display: flex;
                    align-items: center;
                    .trait {
                      display: flex;
                      align-items: center;
                      li {
                        padding: 7px 12px;
                        background-color: RGBA(147, 153, 165, 0.1);
                        margin-right: 10px;
                        color: #9399a5;
                        font-weight: 300;
                        font-size: 12px;
                      }
                    }
                  }
                }
              }
            }
            .item_list_item:nth-last-child(2) {
              padding-bottom: 50px;
            }
          }
          .photo_album {
            width: 1180px;
            min-height: 2608px;
            border: 1px solid #ededed;
            margin-top: 24px;
            .photo_album_container {
              width: 1128px;
              margin: 0 auto;
              padding: 26px;
              .container_head {
                display: flex;
                border-bottom: 1px solid rgb(48, 114, 246);
                li {
                  color: #9399a5;
                  font-size: 14px;
                  padding: 10px;
                  cursor: pointer;
                }
                .head_active {
                  background-color: #3072f6;
                  color: #fff;
                }
              }
              .container_content {
                h5 {
                  font-size: 20px;
                  color: #101d37;
                  margin: 32px 0 24px;
                  span {
                    font-size: 14px;
                  }
                }
                .img_list {
                  overflow: hidden;
                  position: relative;
                  display: flex;
                  font-size: 14px;
                  color: #9399a5;
                  li {
                    width: 200px;
                    height: 210px;
                    margin-right: 19px;
                    div {
                      img {
                        width: 200px;
                        height: 150px;
                      }
                    }
                    .img_text {
                      margin: 16px 0 8px;
                      font-size: 16px;
                      color: #101d37;
                    }
                  }
                  li:nth-child(5) {
                    margin-right: 0px;
                  }
                  .even_more {
                    position: absolute;
                    right: 2px;
                    bottom: 0px;
                  }
                }
              }
            }
          }
        }
      }
    }
  }
}
</style>
